<!--
 * @Author: 胡晓星
 * @Date: 2024-08-08 11:51:57
 * @LastEditors: 491256909@qq.com
 * @LastEditTime: 2025-08-12 17:08:41
 * @FilePath: \src\pages\team\index.vue
 * @Description: 
-->
 
<script setup lang="ts">
import { getAllTeams } from '@/api/index'
import { pointsData } from 'mock/pointsData'
// import { useRouter } from 'vue-router';
definePage({
  name: 'team',
  meta: {
    level: 2,
    title: '🧡 球队展示',
    i18n: 'home.team',
  },
})
console.log(pointsData)
const router = useRouter();

function jumpDetail(id: number) {
  console.log(id,router)
  // 函数体
  router.push(`/team/detail?id=${id}`);
}
function fnAllTeams() {
  getAllTeams().then(({ code, result }) => {
    console.log("获取队伍",code, result)
    
  })
}
fnAllTeams()
</script>

<template>
  <Container>
    <div class="data-content">
      <div class="data-content-title">A组</div>
      <van-grid :column-num="2" :gutter="10">
        <van-grid-item v-for="item in pointsData.groupA" @click="jumpDetail(item.id)" :key="item.id" icon="photo-o" :text="item.name" />
      </van-grid>
    </div>
    <div class="data-content data-contentB">
      <div class="data-content-title data-content-titleB">B组</div>
      <van-grid :column-num="2" :gutter="10">
        <van-grid-item v-for="item in pointsData.groupB" @click="jumpDetail(item.id)" :key="item.id" icon="photo-o" :text="item.name" />
      </van-grid>
    </div>
  </Container>
</template>

<style lang="less" scoped>
.data-content {
  .data-content-title {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    padding: 10px 0;
    margin: 10px 0;
    background: #c2e8ff;
    text-align: center;
    border-radius: 8px;
    &.data-content-titleB {
      margin-top: 20px;
      background: #e5d0fb;
    }
  }
  
}
.data-contentB{
  
}

</style>
